<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row :gutter="48">
          <a-col :span="12">
            <a-form-model-item label="税率" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="taxRate">
              <j-dict-select-tag type="list" v-model="model.taxRate" dictCode="contract_rate_type" placeholder="请选择税率" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="应开票金额(元)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="shouldInvoiceAmount">
              <a-input-number
                :disabled="datailDisabled"
                :max="99999999"
                :min="0"
                v-model="model.shouldInvoiceAmount"
                placeholder="请输入应开票金额"
                style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="已开票金额(元)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="onInvoiceAmount">
              <a-input-number
                :max="99999999"
                :min="-99999999"
                :precision="2"
                v-model="model.onInvoiceAmount"
                placeholder="请输入已开票金额"
                style="width: 100%"
                disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="开票金额(元)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="invoiceAmount">
              <a-input-number
                :disabled="formDisabled"
                :max="isCancel=='0'?((model.shouldInvoiceAmount && (model.onInvoiceAmount || model.onInvoiceAmount==0) )?(Number(model.shouldInvoiceAmount-model.onInvoiceAmount)): 99999999):0"
                :min="isCancel=='0'?0:model.shouldInvoiceAmount?(0-model.shouldInvoiceAmount):-99999999"
                :precision="2"
                v-model="model.invoiceAmount"
                placeholder="请输入开票金额"
                style="width: 100%" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import SelectProjectInput from '@/views/scy/components/SelectProjectInput'
  import SelectTeamInput from '@/views/scy/components/SelectTeamInput'
  import SelectUserByDep from '@/views/scy/components/SelectUserByDep'
  import SelectNodelistInput from '@/views/scy/components/SelectNodelistInput'
  import SelectContractManagerInput from '@/views/scy/components/SelectContractManagerInput'
  import SelectCheckoutlistInput from '@/views/scy/components/SelectCheckoutlistInput'

  export default {
    name: 'ErpFinanceInvoiceExpensesDetailForm',
    components: {
      SelectProjectInput,
      SelectTeamInput,
      SelectUserByDep,
      SelectNodelistInput,
      SelectContractManagerInput,
      SelectCheckoutlistInput
    },
    props: {
      // 表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
      isCancel: {
        type: String,
        default: '0',
        required: false
      },
    },
    data () {
      return {
        flag: false,
        model: {
          // invoiceCategory: '0',
          projectId: null,
          itemMoney: null,
          invoiceAmount: null
        },
        labelCol: {
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 }
        },
        confirmLoading: false,
        validatorRules: {
          projectId: [
              { required: true, message: '请选择项目!', trigger: 'change' }
          ],
          projectContract: [
              { required: true, message: '请选择项目合同!', trigger: 'change' }
          ],
          contractFund: [
              { required: true, message: '请选择合同款项!', trigger: 'change' }
          ],
          projectProgress: [
              { required: true, message: '请输入项目进度!', trigger: 'change' }
          ],
          estimateRefundTime: [
              { required: true, message: '请选择预计回款时间!', trigger: 'change' }
          ],
          invoiceAmount: [
              { required: true, pattern: /^(-([1-9][0-9]*)|([1-9][0-9]*)|-?(0\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/ ,message: '请输入正确的开票金额!', trigger: 'blur' }
          ]
        },
        datailDisabled: true,
        fpList: [], // 主表的发票信息子表
        isAdd: true // 是否点击新增进来的
      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      }
    },
    created () {
       // 备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        console.log('编辑:', record);
        this.$refs['form'].clearValidate();
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        // 校验是否是同一个项目
          const that = this;
          // 触发表单验证
          this.$refs.form.validate(valid => {
            if (valid) {
              if (!this.model.id) {
                this.model.id = parseInt(Math.random() * 1000000000000);
              }
              console.log("this.model",this.model);
              that.$emit('ok', this.model, this.flag);
            }
          })
        },
      // 每次点击新增编辑重新加载发票信息子表
      loadList(list) {
        this.fpList = list;
      },
    }
  }

</script>
